<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动详情</view>
		<uni-card class="card">
			<view class="items2">
				<view class="items_left">
					标题：
				</view>
				<view class="items_right">
					{{ activity.noticeTitle }}
				</view>
			</view>
			<view class="items2">
				<view class="items_left">
					审核人：
				</view>
				<view class="items_right">
					{{ activity.updateBy }}
				</view>
			</view>
			<view class="items2">
				<view class="items_left">
					发布时间：
				</view>
				<view class="items_right">
					{{ activity.createTime }}
				</view>
			</view>
			<view class="items2">
				<view class="items_left">
					审核状态：
				</view>
				<view class="items_right">
					{{ getStatusText(activity.status) }}
				</view>
			</view>
			<view class="items2">
				<view class="items_left">
					审核时间：
				</view>
				<view class="items_right">
					{{ activity.updateTime }}
				</view>
			</view>
			<view class="items2">
				<view class="items_left">
					审核说明：
				</view>
				<view class="items_right">
					{{ activity.remark }}
				</view>
			</view>
			

		</uni-card>
		<uni-card class="card">
			<view class="items2">
				<view class="items_left">
					发布内容：
				</view>
				<view class="items_right">
					{{ activity.noticeContent }}
				</view>
			</view>
			<!-- <view class="items2">
				<view class="items_left">
					图片：
				</view>
				<view class="items_right">
					<image src="@/static/bg.png" mode=""></image>
				</view>
			</view> -->

		</uni-card>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import request from '../../../../utils/request';
	
	// 定义响应式变量存储活动ID
	const noticeId = ref('');
	
	// 定义活动对象，包含所有需要的字段
	const activity = ref({
		noticeTitle: '', // 标题
		noticeContent: '', // 发布内容
		updateBy: '', // 审核人
		createTime: '', // 发布时间
		status: '', // 状态：0通过 1未通过 2未审核
		updateTime: '', // 审核时间
		remark: '' // 审核说明
	});
	
	// 获取状态文本
	const getStatusText = (status) => {
		switch(status) {
			case '0': return '审核通过';
			case '1': return '审核不通过';
			case '2': return '待审核';
			default: return '未知状态';
		}
	};
	
	// 使用uni-app的onLoad生命周期
	onLoad((options) => {
		// 如果存在noticeId参数，则保存
		if (options && options.noticeId) {
			noticeId.value = options.noticeId;
			// console.log('接收到的活动ID:', noticeId.value);
			// 获取活动详情数据
			getActivityDetail();
		}
	});
	
	// 获取活动详情数据的方法
	function getActivityDetail() {
		// 调用API获取活动详情
		request({
		  url: '/notice/notice/'+noticeId.value,
		  method: 'GET',
		  success(res) {
			const result = res.data;
			if (result.code == 200) {
			  activity.value = result.data;
			} else {
			  uni.showToast({
				title: '获取活动详情失败',
				icon: 'none'
			  });
			}
		  },
		  fail() {
			uni.showToast({
			  title: '网络请求失败',
			  icon: 'none'
			});
		  }
		});
	}
	
	function backPage(){
		uni.navigateBack()
	}

</script>

<style>
	@import url('@/common/app.css');

	.card {
		margin: 0;
		height: 600rpx;
	}

	.items2 {
		display: flex;
		justify-content: space-between;
		align-items: start;
		margin-bottom: 40rpx;
	}

	.items_left {
		width: 25%;
		color: black;
	}

	.items_right {
		width: 75%;
		color: black;
	}
	.items_right image{
		width: 300rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	       
			
</style>